<template>
	<view>
		<view class="w-700 m-l-25 m-r-25 m-t-50">
			<view class="b_bai br-20 w-600 h-220 d_flex d_flex_between d_flex_items_center p-l-50 p-r-50 m-t-25" 
				v-for="(item,index) in list" :key="index"
				:class="{'active':index === keys}"
				@click="select(index)">
				<view>
					<view class="color333 f-48" :class="{'active-color':index === key}">{{item.title}}</view>
					<view class="color999 f-24 m-t-30">{{item.desc}}</view>
				</view>
				<view>
					<image :src="item.image" class="w-150 h-150"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:Array,
			keys:Number
		},
		methods:{
			select(path){
				this.$emit('select',path)
			}
		}
	}
</script>

<style lang="scss">
	.active{
		border:1px solid #0055fe;
		.active-color{
			color:#0055fe
		}
	}
</style>
